<template>
	<view>
		<van-cell :title="label" is-link :value="value" @click="onShowPanel" />

		<van-action-sheet :show="visibility" @close="onClose">
			<m-titlebar :title="label" @confirm="onConfirm" @cancel="onClose" :color="primaryColor">
				<van-datetime-picker @input="onChangeTime" :value="convertToTime(currentDate)"  :show-toolbar="false" type="datetime" :max-date="convertToTime(maxDate)" :min-date="convertToTime(minDate)" :formatter="formatter" />
			</m-titlebar>
		</van-action-sheet>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		props: {
			label: String,
			type: String,
			placeholder: String,
			minDate:{
				type: String,
				default: moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
			},
			maxDate:{
				type: String,
				default:  moment(new Date().getTime()).add(30, 'days').format('YYYY-MM-DD HH:mm:ss')
			},
			currentDate:{
				type: String,
				default: moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		data() {
			return {
				visibility: false,
				primaryColor: '#f00',
				value: this.placeholder,
				timeTemp: 0,
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					} else if (type === 'month') {
						return `${value}月`;
					} else if (type === 'day') {
						return `${value}日`;
					} else if (type === 'hour') {
						return `${value}时`;
					} else if (type === 'minute') {
						return `${value}分`;
					}
					
					return value;
				}
			};
		},
		mounted() {
			this.$nextTick(function() {
				this.primaryColor = getApp().globalData.primaryColor
			})
		},
		methods: {
			onShowPanel() {
				this.visibility = true
			},
			onClose() {
				this.visibility = false
			},
			onConfirm() {
				this.value = moment(this.timeTemp).format('YYYY-MM-DD HH:mm')
				this.$emit('change', {
					detail: this.value,
					currentTarget: {
						dataset: {
							type: this.type
						}
					}
				})
				this.onClose()
			},
			onChangeTime(event){
				this.timeTemp = event.detail
			},
			convertToTime(str){
				return moment(str, 'YYYY-MM-DD HH:mm:ss').valueOf()
			}
		}
	}
</script>

<style lang="scss">

</style>
